import classnames from 'classnames'
import { InputHTMLAttributes, useEffect, useRef } from 'react'
import styles from './index.module.scss'
interface Props extends InputHTMLAttributes<HTMLInputElement> {
  extra?: string
  onExtraClick?: () => void
  className?: string
  type?: 'text' | 'password '
}
export default function Input({
  extra,
  onExtraClick,
  className,
  ...rest
}: Props) {
  const inpRef = useRef<HTMLInputElement>(null)
  useEffect(() => {
    inpRef.current!.focus()
  }, [])
  return (
    <div className={classnames(styles.root, className)}>
      <input type="text" className="input" {...rest} ref={inpRef} />
      {extra && (
        <span className="extra" onClick={onExtraClick}>
          {extra}
        </span>
      )}
    </div>
  )
}
